<script lang="ts" setup>
import {onMounted, ref} from "vue";
import router from "@/router";
import axios from "axios";
import {useToast} from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-sugar.css';
const $toast = useToast();//消息提示栏
import crypto from '@/util/crypto'

//是否登录
const isLogin = ref(false)
//是否显示登录对话框
const isShowLogin = ref(false)
const email = ref('')
const password = ref('')

//
const model = ref(0)

//检查是否登录
const checkLogin = () => {
  if (localStorage.getItem("patient-auth-token")) {
    const token = localStorage.getItem("patient-auth-token")
    axios.post("/api/auth/check/患者", {}, {  // 这里传递空对象作为请求体
      headers: {
        token: token  // 使用token作为请求头
      }
    }).then(res => {
      // console.log(res);
      const msg = res.data.message;
      if (res.data.success) {
        // 成功的处理逻辑
        localStorage.setItem("patient-auth-token", msg)
        isLogin.value = true;
        isShowLogin.value = false;
      }
    })
  } else {
    isLogin.value = false
  }

}

//个人中心
const goMyPage = () => {
  router.push("/my")
}
//显示登录提示框
const showLogin = () => {
  isShowLogin.value = true
}
//关闭登录密码提示框
const quitLoginDia = () => {
  isShowLogin.value = false
}

//登录
const login = () => {
  const data = {
    username: email.value,
    password: password.value
  }
  axios.post("/api/auth/login", data)
      .then(res => {
        console.log(res)
        const msg = res.data.message
        if (res.data.success) {
          localStorage.setItem("patient-auth-token", msg)
          isLogin.value = true;
          isShowLogin.value = false;
          $toast.open({
            type: "success",
            message: "登录成功",
            position: "bottom-right"
          })
          router.push("/")
        } else {
          $toast.open({
            type: "error",
            message: "账号或者密码异常",
            position: "bottom-right"
          })
        }
      })
}
//重置密码
const goForgetPassword = () => {
  router.push("/forget")
  isShowLogin.value = false
}
//注册
const goRegister = () => {
  router.push("/register")
  isShowLogin.value = false
}


const address = ref('')
const goAppointment = () => {
  if (isLogin.value){
    router.push('/appointment')
  }else{
    showLogin()
  }
}
const goOnlineAsk = () => {
    router.push('/online-ask')
}
const goFreeBack = () => {
  router.push('/freeback')
}


onMounted(() => {
  checkLogin()
})
const getMyOrderInfo = () => {
  if (localStorage.getItem("patient-auth-token")) {
    axios.post("/api/auth/userinfo", {}, {
      headers: {
        token: localStorage.getItem("patient-auth-token")
      }
    }).then(res => {
      console.log(res)
      if (res.data.success) {
        const msg = res.data.message
        console.log(msg)
        let enc = crypto.encrypt(msg.userPk)
        console.log(enc)
        // console.log(crypto.decrypt(enc))
        localStorage.setItem("patient-user-flag", enc)
      } else {
        $toast.open({
          type: "error",
          message: "获取用户信息异常",
          position: "bottom-right"
        })
      }
    })
  }
}
getMyOrderInfo()

const totop = ref();

const scrollToTop = () => {
  window.scrollTo({
    // top: document.documentElement.offsetHeight, //回到底部
    top: 0, //回到顶部
    left: 0,
    behavior: "smooth", //smooth 平滑；auto:瞬间
  });
};

onMounted(() => {
  // 页面滚动窗口监听事件
  window.onscroll = function () {
    // 获取浏览器卷去的高度
    let high = document.documentElement.scrollTop || document.body.scrollTop; //兼容各浏览器
    if (high >= 900) {
      totop.value.style.display = "block";
    } else {
      totop.value.style.display = "none";
    }
  };
});


</script>

<template>
  <div class="index-main">
    <div class="bgc"></div>
    <q-btn round color="secondary" icon="navigation"
    style="position:fixed;right: 5vw; bottom:130px;z-index: 20" @click="scrollToTop"
    />


    <q-dialog v-model="isShowLogin" persistent style="z-index: 2" transition-hide="flip-up"
              transition-show="flip-down">
      <q-card style="width: 700px; max-width: 80vw;display: flex;height: 500px;">

        <q-img
            :ratio="16/9"
            src="/imgs/logo.jpg"
            style="flex:1"
        />

        <div
            style="flex: 1;margin-left: 40px;display: flex;align-items: start;flex-direction: column;justify-content: space-around">
          <div style="width: 90%">
            <div style="width: 100%;display: flex;justify-content: end">
              <q-btn color="grey-4" icon="close" outline round @click="quitLoginDia"/>
            </div>
            <div class="text-h6">登录</div>
            <div class="text-subtitle2">没有账户？
              <view class="link-to-other" style="margin-left: 30px;" @click="goRegister">注册</view>
            </div>
          </div>
          <q-form style="width: 90%" @submit="login">
            <div class="text-subtitle2">账号</div>
            <q-input v-model="email" :rules="[
          val => val !== null && val !== '' || '请输入账号'
        ]" filled label="撰写账号" lazy-rules style="width: 100%"
            />
            <div class="text-subtitle2">密码</div>
            <q-input v-model="password" :rules="[
          val => val !== null && val !== '' || '请输入密码'
        ]" filled label="输入密码"
                     lazy-rules
                     style="width: 100%"
                     type="password"/>
            <div class="link-to-other" style="margin-top: 40px;" @click="goForgetPassword">我忘记了密码</div>
            <q-btn color="black" label="访问" stack stretch
                   style="width: 90%;padding-top: 5px;padding-bottom: 5px;margin-top: 40px;"
                   type="submit"/>
          </q-form>

        </div>
      </q-card>
    </q-dialog>

    <div class="header">
      <div class="flex" style="align-items: center;margin-left: 2vw;">
        <div class="logo" @click="router.push('/')">
<!--          <img src="/logo.png" alt="" style="width: 200px;height: 50px">-->
          牙医信息在线平台
        </div>
        <ul class="flex" style="list-style: none">
          <li @click="goAppointment">在线预约</li>
          <li @click="goOnlineAsk">在线咨询</li>
          <li @click="goFreeBack">服务反馈</li>
        </ul>
      </div>
      <div class="flex" style="margin-right: 2vw;">
        <view class="d-flex align-item-center cursor-pointer" style="margin-left: 10px;"
              @click="isLogin ? goMyPage() : showLogin()">
          <q-icon name="account_circle" size="20px" style="margin-right: 10px;"/>
          {{ isLogin ? "个人中心" : "登录" }}
        </view>
      </div>

    </div>
    <div class="header-back"></div>
    <router-view/>
  </div>
</template>

<style lang="scss" scoped>
.bgc {
  height: 100vh;
  width: 100vw;
  background-color: #f8f6f3;
  z-index: -1;
  top: 0;
  position: fixed;
}

.link-to-other {
  color: #8e7749;
  text-decoration: underline;
  cursor: pointer;
  text-decoration-color: #8e7749; /* 设置下划线为蓝色 */
}

.index-main {
  width: 100vw;
  .parallax {
    width: 100vw;
  }

  .logo {
    font-size: 25px;
    font-weight: 100;
    color: #b9ae99;
    cursor: pointer;
  }

  .header {
    z-index: 199999;
    position: fixed;
    height: 80px;
    display: flex;
    align-items: center;
    width: 100vw;
    background-color: #fff;
    justify-content: space-between;
  }

  .header-back {
    height: 80px;
  }

  ul > li {
    margin: 20px;
    cursor: pointer;
  }

  .fab-item {
    position: fixed;
    right: 4.5vw;
    bottom: 50px;
  }
}

.thead-sticky tr > *,
.tfoot-sticky tr > * {
  position: sticky;
  opacity: 1;
  z-index: 1;
  background: #009688;
  color: white;
}

.thead-sticky tr:last-child > * {
  top: 0;
}

.tfoot-sticky tr:first-child > * {
  bottom: 0;
}


</style>
